<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <el-button type="primary" icon="el-icon-refresh" @click="getList" class="refresh-btn">
        刷新列表
      </el-button>
    </div>

    <!-- 字段权限表格 -->
    <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        fit
    style="width: 100%; margin-top: 15px"
    :row-key="(row) => row.fieldCode"
    class="permission-table"
    >
    <!-- 序号列 -->
    <el-table-column label="序号" type="index" width="60" align="center" />

    <!-- 字段标识 -->
    <el-table-column
        label="字段标识"
        prop="fieldCode"
        min-width="160"
    align="center"
    />

    <!-- 字段显示名称 -->
    <el-table-column
        label="字段显示名称"
        prop="fieldName"
        min-width="240"
    align="center"
    />

    <!-- 状态列 -->
    <el-table-column
        label="状态"
        align="center"
        min-width="120"
    >
    <template #default="scope">
      <span :class="scope.row.isChange ?  'status-not-changeable' : 'status-changeable'">
        {{ scope.row.isChange ? "不可修改" : "可修改" }}
      </span>
    </template>
    </el-table-column>

    <!-- 是否可修改 -->
    <el-table-column
        label="是否可修改"
        align="center"
        min-width="140"
    >
    <template #default="scope">
      <el-checkbox
          v-model="scope.row.isChange"
          @change="(val) => handleIsChange(scope.row.fieldCode, val, scope.row)"
          :disabled="loading"
      >
        {{ val ? "可修改" : "不可修改" }}
      </el-checkbox>
    </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "StudentShowJudgment",
  data() {
    return {
      tableData: [],
      loading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      request({
        url: "/student/showJudgment/list",
        method: "get"
      })
          .then((res) => {
            if (res.code === 200) {
              this.tableData = res.data.map((item) => ({
                ...item,
                isChange: !item.isChange
              }));
            } else {
              this.$message.error("数据加载失败：" + res.msg);
            }
          })
          .catch((err) => {
            this.$message.error("网络异常：" + err.message);
          })
          .finally(() => {
            this.loading = false;
          });
    },
    handleIsChange(fieldCode, val, row) {
      this.loading = true;
      const oldVal = !val;
      request({
        url: "/student/showJudgment/updateIsChange",
        method: "put",
        params: {
          fieldCode: fieldCode,
          isChange: val ? 0 : 1
        }
      })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("更新成功");
            } else {
              this.$message.error("更新失败：" + res.msg);
              row.isChange = oldVal;
            }
          })
          .catch((err) => {
            this.$message.error("更新异常：" + err.message);
            row.isChange = oldVal;
          })
          .finally(() => {
            this.loading = false;
          });
    }
  }
};
</script>

<style scoped>
/* 页面容器样式：卡片化+阴影 */
.app-container {
  padding: 24px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin: 20px;
}

/* 头部区域：按钮交互优化 */
.page-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.refresh-btn {
  border-radius: 4px;
  transition: all 0.3s ease;
}
.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 149, 246, 0.2);
}

/* 表格样式：圆角+hover效果增强 */
.permission-table {
  border-radius: 4px;
  overflow: hidden; /* 让表格边框圆角生效 */
}
.el-table__header th,
.el-table__body td {
  text-align: center;
}
/* 条纹行背景色优化 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #f9fafc;
}
/* 行hover效果 */
.el-table__body tr:hover td {
  background-color: #e6f7ff !important;
}

/* 状态文字样式：颜色+加粗 */
.status-changeable {
  color: #67c23a; /* 可修改-绿色 */
  font-weight: 500;
}
.status-not-changeable {
  color: #f56c6c; /* 不可修改-红色 */
  font-weight: 500;
}
</style>